<%--@elvariable id="isLogin" type="java.lang"--%>
<%--@elvariable id="courseCollect" type="java.util.List"--%>
<%--@elvariable id="notLogin" type="java.lang"--%>
<%--@elvariable id="course" type="com.genghis.ptas.course.entity.CourseInfo"--%>
<%--@elvariable id="courseSystem" type="java.util.List"--%>
<%--@elvariable id="courseHot" type="java.util.List"--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en"> <!--<![endif]-->

<!-- Head BEGIN -->
<head>
    <meta charset="utf-8">

    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta content="Metronic Shop UI description" name="description">
    <meta content="Metronic Shop UI keywords" name="keywords">
    <meta content="keenthemes" name="author">

    <meta property="og:site_name" content="-CUSTOMER VALUE-">
    <meta property="og:title" content="-CUSTOMER VALUE-">
    <meta property="og:description" content="-CUSTOMER VALUE-">
    <meta property="og:type" content="website">
    <meta property="og:image" content="-CUSTOMER VALUE-">
    <!-- link to image for socio -->
    <meta property="og:url" content="-CUSTOMER VALUE-">
    <base href="<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/scorm/ "%> "/>

    <!-- Global styles START -->
    <link href="ecommerce/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="ecommerce/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
    <!-- Global styles END -->

    <!-- Page level plugin styles START -->
    <link href="ecommerce/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link href="ecommerce/plugins/bxslider/jquery.bxslider.css" rel="stylesheet">
    <link rel="stylesheet" href="ecommerce/plugins/layerslider/css/layerslider.css" type="text/css">
    <!-- Page level plugin styles END -->

    <!-- Theme styles START -->
    <link href="ecommerce/css/style-metronic.css" rel="stylesheet" type="text/css">
    <link href="ecommerce/css/style.css" rel="stylesheet" type="text/css">
    <link href="ecommerce/css/style-responsive.css" rel="stylesheet" type="text/css">
    <link href="ecommerce/css/custom.css" rel="stylesheet" type="text/css">
    <!-- Theme styles END -->
</head>
<!-- Head END -->
<!-- Body BEGIN -->
<body>

<!-- BEGIN SLIDER -->
<div class="page-slider margin-bottom-35">
    <!--LayerSlider begin-->
    <div id="layerslider" style="width: 100%; height: 494px; margin: 0 auto;">

        <!--LayerSlider layer-->
        <div class="ls-layer ls-layer2" style="slidedirection: right; transition2d: 24,25,27,28; ">
            <img src="scorms/admin20140816032042/20140822815971logo.jpg"
                   class="ls-bg" alt="Slide background">

            <div class="ls-s-1 ls-title title"
                 style=" top: 40%; left: 21%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
                <strong class="title">汽车配件设计</strong>
                     工业设计
                <em class="title">引领你走向成功之路！</em>
            </div>

            <a href="javascript:void(0);" onclick="watchCourseInfo(142)" class="ls-s-1 ls-more mini-text"
               style=" top: 72%; left: 21%;	background: #000 ; border-color: #FFFFFF ; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; display: inline-block; white-space: nowrap;">
                点击观看
            </a>
        </div>

        <!--LayerSlider layer-->
        <div class="ls-layer ls-layer2" style="slidedirection: right; transition2d: 110,111,112,113; ">
            <img src="scorms/admin20140816025054/20140822814390logo.jpg"  class="ls-bg" alt="Slide background">

            <div class="ls-s-1 ls-title title"
                 style=" top: 40%; left: 21%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
                <strong class="title">万有引力</strong>
                学习牛顿
                <em class="title">看世界</em>
            </div>

            <a href="javascript:void(0);" onclick="watchCourseInfo(139)" class="ls-s-1 ls-more mini-text"
               style=" top: 72%; left: 21%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; display: inline-block; white-space: nowrap;">
                点击观看
            </a>
        </div>

        <!--LayerSlider layer-->
        <div class="ls-layer ls-layer3" style="slidedirection: right; transition2d: 92,93,105; ">
            <img src="scorms/admin20140816031849/20140822815189logo.jpg" class="ls-bg" alt="Slide background">

            <div class="ls-s-1 ls-title"
                 style=" top: 83px; left: 33%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
                <strong>苏菲的世界</strong>
                20世纪百部经典著作之一。
            </div>

            <div class="ls-s-1"
                 style=" top: 333px; left: 33%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap; font-size: 20px; font: 20px 'Open Sans Light', sans-serif;">
                <a href="javascript:void(0);" onclick="watchCourseInfo(140)" class="ls-buy">
                    点击观看
                </a>

                <div class="ls-price">
                    <span></span>
                </div>
            </div>
        </div>

        <!--LayerSlider layer-->
        <div class="ls-layer ls-layer5" style="slidedirection: right; transition2d: 110,111,112,113; ">
            <img src="scorms/admin20140816031935/20140822815183logo.jpg" class="ls-bg" alt="Slide background">

            <div class="ls-s-1 title"
                 style=" top: 35%; left: 60%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
                <br>
                <span style="color: #ff6f2d">追风筝的人</span>
            </div>

            <div class="ls-s-1 mini-text"
                 style=" top: 70%; left: 60%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap;">
                <span>卡勒德·胡赛尼</span>
                <a href="javascript:void(0);" onclick="watchCourseInfo(141)">点击观看</a>
            </div>
        </div>

    </div>
    <!--LayerSlider end-->
</div>
<!-- END SLIDER -->

<div class="main">
    <div class="container">
        <!-- BEGIN SALE PRODUCT & NEW ARRIVALS -->
        <div class="row margin-bottom-40">
            <!-- BEGIN SALE PRODUCT -->
            <div class="col-md-12 sale-product">
                <h2>最热课件</h2>

                <div class="bxslider-wrapper">
                    <ul id="hotCourse" class="bxslider" data-slides-phone="1" data-slides-tablet="2"
                        data-slides-desktop="5"
                        data-slide-margin="15">
                    </ul>
                </div>
            </div>
            <!-- END SALE PRODUCT -->
        </div>
        <!-- END SALE PRODUCT & NEW ARRIVALS -->


        <!-- BEGIN SIDEBAR & CONTENT -->
        <div class="row margin-bottom-40">
            <!-- END SIDEBAR & CONTENT -->

            <!-- BEGIN CONTENT -->
            <div class="col-md-9 col-sm-7">
                <!-- BEGIN PRODUCT LIST -->
                <div class="row product-list">
                    <h2 style="margin-left: 15px">平台课件</h2>

                    <div id="stageCourse">

                    </div>
                </div>
                <!-- END PRODUCT LIST -->
                <div class="margin-top-20">
                    <ul class="pagination">
                        <li>
                            <a href="javascript:" onclick="initStageCourse(1)"><i class="fa fa-angle-left"></i></a>
                        </li>
                        <c:forEach begin="1" end="${pageNumber+1}" var="number">
                            <li><a href="javascript:" onclick="initStageCourse(${number})">${number}</a></li>
                        </c:forEach>
                        <li>
                            <a href="javascript:" onclick="initStageCourse(${pageNumber+1})"><i
                                    class="fa fa-angle-right"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- END CONTENT -->

            <!-- BEGIN SIDEBAR -->
            <div class="sidebar col-md-3 col-sm-5">
                <div class="sidebar-products clearfix">
                    <h3 style="text-align: center;">
                        <a style="color: red" href="javascript:" onclick="initRank(1)">周注册行榜</a> |
                        <a style="color: red" href="javascript:" onclick="initRank(2)">月注册行榜</a>
                    </h3>
                    <hr style="margin-bottom: 50px;">
                    <div id="rank">
                    </div>
                </div>
            </div>
            <!-- END SIDEBAR -->
        </div>
        <!-- END SIDEBAR & CONTENT -->


        <!-- BEGIN TWO PRODUCTS & PROMO -->
        <div class="row margin-bottom-35 ">
            <!-- BEGIN TWO PRODUCTS -->
            <div class="col-md-6 two-items-bottom-items">
                <h2>系统推荐</h2> <%--如果用户已经登陆竟是用户可能感兴趣的--%>

                <div class="bxslider-wrapper">
                    <ul id="allStudy" class="bxslider" data-slides-phone="1" data-slides-tablet="2"
                        data-slides-desktop="2"
                        data-slide-margin="15">
                    </ul>
                </div>
            </div>
            <!-- END TWO PRODUCTS -->
            <!-- BEGIN PROMO -->
            <div class="col-md-6">
                <div class="content-slider">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="ecommerce/temp/index-sliders/slide1.jpg" class="img-responsive"
                                     alt="Berry Lace Dress">
                            </div>
                            <div class="item">
                                <img src="ecommerce/temp/index-sliders/slide2.jpg" class="img-responsive"
                                     alt="Berry Lace Dress">
                            </div>
                            <div class="item">
                                <img src="ecommerce/temp/index-sliders/slide3.jpg" class="img-responsive"
                                     alt="Berry Lace Dress">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END PROMO -->
        </div>
        <!-- END TWO PRODUCTS & PROMO -->
    </div>
</div>

<%@include file="../../includes/help.jsp" %>

<%@include file="../../includes/footer.jsp" %>

<!-- BEGIN CORE PLUGINS (REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="ecommerce/plugins/respond.min.js"></script>
<![endif]-->
<script src="ecommerce/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="ecommerce/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="ecommerce/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="ecommerce/plugins/back-to-top.js"></script>
<script type="text/javascript" src="ecommerce/plugins/jQuery-slimScroll/jquery.slimscroll.min.js"></script>
<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL JAVA_SCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
<script type="text/javascript" src="ecommerce/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<!-- pop up -->
<script type="text/javascript" src="ecommerce/plugins/bxslider/jquery.bxslider.min.js"></script>
<!-- slider for products -->
<script type="text/javascript" src='ecommerce/plugins/zoom/jquery.zoom.min.js'></script>
<!-- product zoom -->
<script src="ecommerce/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<!-- Quantity -->

<!-- BEGIN LayerSlider -->
<script src="ecommerce/plugins/layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
<script src="ecommerce/plugins/layerslider/jQuery/jquery-transit-modified.js" type="text/javascript"></script>
<script src="ecommerce/plugins/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
<script src="ecommerce/plugins/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
<!-- END LayerSlider -->
<script src="<c:url value="/js/common/common.js"/>" type="text/javascript"></script>
<base href="<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()%><c:url value="/"/>"/>

<script type="text/javascript" src="ecommerce/scripts/app.js"></script>
<script type="text/javascript" src="ecommerce/scripts/index.js"></script>
<!-- END PAGE LEVEL JAVA_SCRIPTS -->
</body>
<!-- END BODY -->
</html>

<script type="text/javascript">
    jQuery(document).ready(function () {
        <c:if test="${isLogin}">
        if (parent.$("#hasUser").val() == "false") {
            parent.location.href = "index";
        }
        </c:if>
        Index.initLayerSlider();
        initHotCourse(1);
        initStageCourse(1);
        initRank(1);
        initAllStudy(1);
        App.init();
        App.initImageZoom();
        App.initBxSlider();
        App.initTouchspin();
    });

    function registerCourse(courseId) {
        $.ajax({
            url: "courseRegister/addCourseRegister",
            async: false,
            data: {
                courseId: courseId,
                totalTime: "0000:00:00.00"
            },
            dataType: "json",
            type: "POST",
            success: function (judge) {
                top.initTopRegister();
                if (judge) {
                    top.$("#allRegister").html(top.$("#allRegister").html() - -1);
                    parent.bootbox.alert("注册成功！");
                } else {
                    parent.bootbox.alert("您已注册可以直接观看！");
                }

            },
            error: function () {
                parent.bootbox.alert("注册失败！");
            }
        })
    }

    function watchCourseInfo(courseId) {
        location.href = basePath + "course/courseInfoDo?id=" + courseId;
    }

    function collectionCourse(courseId) {
        $.ajax({
            url: "courseRegister/collectionCourse",
            async: false,
            data: {
                courseId: courseId
            },
            dataType: "json",
            type: "POST",
            success: function (judge) {
                if (judge) {
                    top.$("#allCollect").html(top.$("#allCollect").html() - -1);
                }
                parent.bootbox.alert("收藏成功！");
            },
            error: function () {
                parent.bootbox.alert("请先登录！");
                $.messager.alert("失败", "", "", function () {
                })
            }
        })
    }

    //    width:图片的宽度；height：图片的高度  outerAgo:外层div前标签  outerAfter:外层div后标签
    function showCourseHtml(data, width, height, outerAgo, outerAfter) {
        var innerHtml = "";
        for (var i in data) {
            //以下为主页内课件摆放每个图片的Html代码 因其相同性大 提出来 用ajax向后台取数据  动态加载显示到页面
            // 当 width 为空串的时候 Img没有Style
            var imgStyle = width == "" ? "" : "style='width: " + width + "px;height: " + height + "px'";
            var courseImg = "<img src='" + data[i].photoUrl + "' class='img-responsive' " + imgStyle + " alt='" + data[i].courseName + "'>";
            var collectCourse = "<a href='javascript:void(0);'<c:if test='${isLogin}'> onclick='collectionCourse(" + data[i].id + ")'</c:if> class='btn btn-default add2cart'>收藏课件</a>";
            var lookCourse = "";
            <c:if test="${isLogin}">lookCourse = data[i].isRegister == true ? "<a onclick='watchCourseInfo(" + data[i].id + ")' class='btn btn-default'>课件信息</a>" : "<a onclick='watchCourseInfo(" + data[i].id + ")' class='btn btn-default'>课件信息</a><a onclick='registerCourse(" + data[i].id + ")' class='btn btn-default'>注册课件</a>" </c:if>;
            var registerCourse = "<a onclick='registerCourse(" + data[i].id + ")' class='btn btn-default'>注册课件</a>";
            var showHidden = "<div>" + <c:if test="${isLogin}">  lookCourse + </c:if> "</div>";

            // 当 width 为空串的时候 没有图片效果处理
            var picture = "<div class='pi-img-wrapper'>" + courseImg + showHidden + "</div>";
            var courseScore ="<div class='pi-price'>"+ data[i].averageScore + " </div>";
            var courseName =  "<h3> "+ "<a href='javascript:;' onclick='watchCourseInfo(" + data[i].id + ")'> " + data[i].courseName + " </a></h3> ";
            innerHtml += width == "" ? outerAgo + courseImg + courseName + courseScore +  outerAfter : outerAgo + "<div class='product-item'>" + picture + courseName + courseScore + collectCourse+ "</div>" + outerAfter;
        }
        return innerHtml;
    }

    function initStageCourse(page) {
        $.ajax({
            url: "query/queryStageCourse",
            async: false,
            data: {
                page: page
            },
            dataType: "json",
            type: "POST",
            success: function (data) {
                var innerHtml = showCourseHtml(data, 250, 155, "<div class='col-md-4 col-sm-6 col-xs-12'>", "</div>");
                $("#stageCourse").html(innerHtml);
                App.initBxSlider();
                App.initBxSlider();
            },
            error: function (data) {

            }
        })
    }

    function initHotCourse(page) {
        $.ajax({
            url: "query/queryHotCourse",
            async: false,
            data: {
                page: page
            },
            dataType: "json",
            type: "POST",
            success: function (data) {
                var innerHtml = showCourseHtml(data, 200, 120, "<li>", "</li>");
                $("#hotCourse").html(innerHtml);
                App.initBxSlider();
            },
            error: function (data) {

            }
        })
    }

    function initAllStudy(page) {
        $.ajax({
            url: "query/queryInterestedCourse",
            data: {
                courseId: page
            },
            dataType: "json",
            type: "POST",
            success: function (data) {
                var innerHtml = showCourseHtml(data, 250, 155, "<li>", "</li>");
                $("#allStudy").html(innerHtml);
                App.initBxSlider();
            },
            error: function (data) {
            }
        })
    }

    function initRank(page) {
        $.ajax({
            url: "query/queryRank",
            async: false,
            data: {
                page: page
            },
            dataType: "json",
            type: "POST",
            success: function (data) {
                var innerHtml = showCourseHtml(data, "", 40, "<div class='item'>", "</div>");
                $("#rank").html(innerHtml);
                App.initBxSlider();
                App.initBxSlider();
            },
            error: function (data) {

            }
        })
    }

</script>